<template>
	<view class="">
		<u-navbar title="支付订单" :border-bottom="false"></u-navbar>
		<view class="content">
			<view class="u-text-center content-main">
				<view class="c3 fs30">订单金额</view>
				<view class="c3 fs54 fw5 mt20"><text class="fs24">¥</text>{{priceInfo.platformMoney||0}}</view>
				<view class="c3 fs24 mt20 ">
					商品总价：<text class="price fw5 mr40">¥{{priceInfo.goodsMoney||0}}</text>运费：<text
						class="app-theme fw5">¥{{priceInfo.sendMoney||0}}</text>
				</view>
			</view>
			<view class="pay-box">
				<u-radio-group v-model="payTytpe" @change="radioGroupChange">
					<view class="pay-box-item df aic" @click="payTytpe = 'wx'">
						<nmr-icon name="weixinzhifu" size="42" color="#09BB07"></nmr-icon><text
							class="c3 fs30 ml20">微信支付</text>
						<view class="" style="margin-left: auto;width: 40rpx;">
							<u-radio style="width: 40rpx;" name="wx" active-color="#48A147" shape="circle" ></u-radio>
						</view>
					</view>
					<view class="pay-box-item df aic mt30" v-if="szbankOpen=='true'"  @click="payTytpe = 'jh'">
						<nmr-icon name="ico" size="42" color="#09BB07"></nmr-icon><text
							class="c3 fs30 ml20">订单付款码付款</text>
						<view class="" style="margin-left: auto;width: 40rpx;">
							<u-radio style="width: 40rpx;" name="jh" active-color="#48A147" shape="circle" ></u-radio>
						</view>
					</view>
					<!-- <view class="pay-box-item df aic mt30">
					<nmr-icon name="daikuan" size="42" color="#FF4500"></nmr-icon><text class="c3 fs30 ml20">找人支付</text>
					<view class="" style="margin-left: auto;width: 40rpx;">
						<u-checkbox style="width: 40rpx;" @change="checkChange" active-color="#48A147" shape="circle"
							v-model="checked"></u-checkbox>
					</view>
				</view> -->
				</u-radio-group>
			</view>
			<!--  -->
			<view class="u-text-center  desc-sz">
				<image src="../../static/sz-bank.png" style="width: 200rpx;height: 47rpx;" mode="widthFix"></image>
				<view class="c9 fs28 mt10">订单交易已接入苏州银行安全保障</view>
			</view>
			<view class="mt50">
				<u-button type="primary" shape='circle' @click="submitShopPurOrderAll" :loading="loading"
					:custom-style="{fontSize: '30rpx', color: '#ffffff',width: '630rpx', height: '88rpx',background: 'linear-gradient(90deg, #48A147 0%, #8AE38A 100%);'}"
					ripple>确认支付</u-button>
			</view>
		</view>
		<StatusModal v-model="showStatus"></StatusModal>
		<payModal :qrLimitTime="qrLimitTime" ref="payModal" :price="priceInfo.platformMoney" v-model="showPayCode">
		</payModal>
	</view>
</template>

<script>
	import StatusModal from './components/StatusModal.vue'
	import payModal from './components/payModal.vue'

	import {
		submitShopPurOrder,
		directGWGetQRCode,
		directGWGetQRCodeMap,
		szBankApplet,
		szBankAppletLess
	} from '@/api/order.js'
	export default {
		components: {
			StatusModal,
			payModal
		},
		data() {
			return {
				showStatus: false,
				orderId: '',
				priceInfo: {},
				checked: true,
				loading: false,
				szbankOpen: false,
				payTytpe: 'wx',
				showPayCode: false,
				qrLimitTime: '',
				isLess: false
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.priceInfo = JSON.parse(e.priceInfo)
			this.szbankOpen = e.szbankOpen
			this.isLess = e.isLess == 'true'
		},
		methods: {
			async submitShopPurOrderAll() {
				if (this.payTytpe === 'wx') {
					if (this.szbankOpen == 'true') { //蘇州銀行
						if (this.isLess) {
							this.szBankAppletLess()
						} else {
							this.szBankApplet()
						}
					} else {
						this.submitShopPurOrder()
					}
				} else {
					this.directGWGetQRCode()
				}
			},
			paySz(params) {
				uni.request({
					method: 'post',
					url: `https://epay.suzhoubank.com/mcg/openAPI`,
					data: params,
					header: {
						"Content-Type": "application/json;charset=GB2312",
					},
					success: (res) => {
						if (res.statusCode == 502) {
							console.log(Number(res.statusCode))
							uni.reLaunch({
								url: '/pages/badPage'
							})
						}
						if (res.data.code == 200) {
							resolve(res.data.data); //返回值
						} else {
							resolve(null); //返回值
						}
					}
				})
			},
			directGWGetQRCode() {
				uni.showLoading({
					title: "获取中...",
					mask: true
				})
				return directGWGetQRCodeMap({
					shopPurOrderId: this.orderId,
					shopPurOrderChangeLogId:this.orderId,
					isLess:this.isLess
				}).then(res => {
					if (res.code == 200) {
						this.showPayCode = true
						this.$nextTick(e => {
							setTimeout(() => {
								this.$refs.payModal.qrcodeInit(res.data.url)
								this.qrLimitTime = res.data.qrLimitTime
							})
						})
						uni.hideLoading()

					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			radioGroupChange(e) {
				console.log(e)
			},
			szBankApplet() {
				szBankApplet({
					shopPurOrderId: this.orderId,
					type: 1
				}).then(res => {
					if (res.code == 200) {
						let param = res.data
						let path = "pages/anppAppletPay/anppAppletPay?param=" + param
						this.$common.toWxHandleWx('wx96440ba363922067', path)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			szBankAppletLess() {
				szBankAppletLess({
					shopPurOrderChangeLogId: this.orderId,
					type: 1
				}).then(res => {
					if (res.code == 200) {
						let param = res.data
						let path = "pages/anppAppletPay/anppAppletPay?param=" + param
						this.$common.toWxHandleWx('wx96440ba363922067', path)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			submitShopPurOrder() {
				submitShopPurOrder({
					openId: uni.getStorageSync('openid'),
					orderId: this.orderId
				}).then(res => {
					if (res.code == 200) {
						this.wxPay(res)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			wxPay(res) {
				let that = this
				this.loading = true
				uni.requestPayment({
					provider: 'wxpay',
					...res.data.wxInfo,
					success: function(res) {
						that.successFun()
					},
					fail: function(err) {
						that.errorFunc()
					},
				});

			},
			successFun() {
				let that = this
				that.$u.vuex('CARTLIST', [])
				that.$u.toast('支付成功，为您跳转订单页')
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/order/order'
					})
					that.loading = false;
				}, 800)
			},
			errorFunc() {
				let that = this
				that.$u.toast('暂未支付，为您跳转订单页')
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/order/order'
					})
					that.loading = false;
				}, 800)

			},
		}

	}
</script>

<style lang="scss" scoped>
	.desc-sz {
		position: absolute;
		width: 100vw;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		left: 0;
	}

	.pay-box {
		margin: 30rpx;
	}

	.pay-box-item {
		padding: 30rpx;
		background-color: white;
		border-radius: 20rpx;
	}

	.content-main {
		background-color: white;
		padding-top: 50rpx;
		padding-bottom: 30rpx;
	}
</style>